<template>
  <template v-if="!loading">
    <div style="height: 70px;width: 100%;border-top: 1px solid #555;border-bottom: 1px solid #555;display: flex;justify-content: space-between;align-items: center;">
      <div style="display:flex;height: 100%;align-items: center">
        <img :src="getInstanceImg()" alt="inst" style="height: 80%;border: 1px solid #555">
        <img :src="getBossImg()" alt="boss" style="height: 80%;margin-left: 10px;margin-right: 10px;border: 1px solid #555">
        <div>
          <div style="font-size: 20px;margin-bottom: 5px">
            <text>
              {{mapList[battleData.mapDetail]['name']}}
            </text>
            <text style="margin-left: 15px">
              {{battleData.boss}}
            </text>
          </div>
          <div>击杀于：{{new Date(battleData.battleTime * 1000).toLocaleString()}}</div>
        </div>
      </div>
      <div>
        <div>复盘版本：{{battleData.edition}}</div>
        <div>战斗时长：{{(battleData.act.rdps.player[Object.keys(battleData.act.rdps.player)[0]]['sumTime']/1000).toFixed(0)}}秒</div>
      </div>
    </div>
    <div style="margin-top: 40px">
      <el-table :data="battleData.form" size="small" table-layout="auto" highlight-current-row @current-change="selectRow">
        <el-table-column label="角色名" align="center">
          <template #default="scope">
            <div style="display: flex;justify-content: center;align-items: center">
              <img :src="getOccImg(scope.row.rdps.occ)" style="width: 20px;height: 20px;margin-right: 5px" />
              <div :style="{'color':occTable[scope.row.rdps.occ]['color']}">{{scope.row.rdps.name}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="rDPS" align="center" sortable :sort-method="rdpsSort">
          <template #default="scope">
            <div>{{scope.row.rdps.dps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="nDPS" align="center" sortable :sort-method="ndpsSort">
          <template #default="scope">
            <div>{{scope.row.ndps.dps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="mrDPS" align="center" sortable :sort-method="mrdpsSort">
          <template #default="scope">
            <div>{{scope.row.mrdps.dps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="mnDPS" align="center" sortable :sort-method="mndpsSort">
          <template #default="scope">
            <div>{{scope.row.mndps.dps?scope.row.mndps.dps.toFixed(0):scope.row.mndps.dps}}</div>
          </template>
        </el-table-column>
        <el-table-column label="rHPS" align="center" sortable :sort-method="rhpsSort">
          <template #default="scope">
            <div>{{scope.row.rhps.hps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="HPS" align="center" sortable :sort-method="hpsSort">
          <template #default="scope">
            <div>{{scope.row.hps.hps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="oHPS" align="center" sortable :sort-method="ohpsSort">
          <template #default="scope">
            <div>{{scope.row.ohps.hps.toFixed(0)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="aHPS" align="center" sortable :sort-method="ahpsSort">
          <template #default="scope">
            <div>{{scope.row.ahps.hps.toFixed(0)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="selectedRow" style="margin-top: 40px">
      <el-tabs v-model="displayStat" >
        <el-tab-pane label="rDPS" name="rdps"></el-tab-pane>
        <el-tab-pane label="nDPS" name="ndps"></el-tab-pane>
        <el-tab-pane label="mrDPS" name="mrdps"></el-tab-pane>
        <el-tab-pane label="mnDPS" name="mndps"></el-tab-pane>
        <el-tab-pane label="rHPS" name="rhps"></el-tab-pane>
        <el-tab-pane label="HPS" name="hps"></el-tab-pane>
        <el-tab-pane label="oHPS" name="ohps"></el-tab-pane>
        <el-tab-pane label="aHPS" name="ahps"></el-tab-pane>
      </el-tabs>
      <div style="display: flex;justify-content: space-between">
        <div style="width: 45%">
          <div style="margin-bottom: 10px">伤害构成</div>
          <el-table :data="displayData['namedSkill']" style="margin-right: 20px" size="small"
                    :default-sort="{prop:'sum',order:'descending'}">
            <el-table-column label="技能名" prop="name" align="center"></el-table-column>
            <el-table-column label="伤害" prop="sum" align="center">
              <template #default="scope">
                {{scope.row.sum.toFixed(0)}}
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="num" align="center" />
            <el-table-column label="伤害占比" prop="percent" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat((100 * scope.row.percent).toFixed(2))" />
              </template>
            </el-table-column>
          </el-table>
        </div>
          <template v-if="displayData['namedSource']">
            <div  style="width: 45%">
              <div style="margin-bottom: 10px">所受增益</div>
              <el-table :data="displayData['namedSource']" size="small" :default-sort="{prop:'sum',order:'descending'}">
                <el-table-column label="增益" prop="name" align="center"></el-table-column>
                <el-table-column label="伤害" prop="sum" align="center">
                  <template #default="scope">
                    {{scope.row.sum.toFixed(0)}}
                  </template>
                </el-table-column>
                <el-table-column label="数量" prop="num" align="center" />
                <el-table-column label="伤害占比" prop="percent" align="center">
                  <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat((100 * scope.row.percent).toFixed(2))" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        <template v-if="displayData['namedTarget']">
          <div style="width: 45%">
            <div style="margin-bottom: 10px">目标</div>
              <el-table :data="displayData['namedTarget']" size="small" :default-sort="{prop:'sum',order:'descending'}">
                <el-table-column label="目标" prop="name"></el-table-column>
                <el-table-column label="伤害" prop="sum"></el-table-column>
                <el-table-column label="伤害占比" prop="percent">
                  <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat((100 * scope.row.percent).toFixed(2))" />
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </template>
      </div>
    </div>
  </template>
</template>

<script setup>
import {computed, ref, toRaw} from "vue";
import {useRoute,useRouter} from "vue-router";
import axios from "axios";
import lodash from 'lodash'

const loading = ref(true)

const route = useRoute()

const router = useRouter()

const battleData = ref()

if (route.params.id){
  axios({
    url:`http://120.48.95.56:8009/getBattle?hash=${route.params.id}`,
    method:'get',
  }).then((res)=>{
    console.log(res)
    battleData.value = res.data
    battleData.value.form = []
    for (let player in battleData.value['act']['rdps']['player']){
      battleData.value.form.push({playerID:player})
    }
    // 版本控制
    const version = parseInt(battleData.value.edition.replace(/\./g,''))
    if (version > 839){
      for (let i = 0; i < battleData.value.form.length; i++){
        for (let stat of ['ahps','hps','mrdps','mndps','ndps','ohps','rdps','rhps']){
          battleData.value.form[i][stat] = battleData.value['act'][stat]['player'][battleData.value.form[i]['playerID']]
          if (battleData.value.form[i][stat] === undefined){
            battleData.value.form[i][stat] = {
              'hps':0,
              'dps':0
            }
          }
        }
      }
    }
    // SB狗花，写的什么破BUG，放尼玛嗨
    else if (version === 839){
      for (let i = 0; i < battleData.value.form.length; i++){
        for (let stat of ['ahps','hps','ndps','ohps','rdps','rhps']){
          battleData.value.form[i][stat] = battleData.value['act'][stat]['player'][battleData.value.form[i]['playerID']]
          if (battleData.value.form[i][stat] === undefined){
            battleData.value.form[i][stat] = {
              'hps':0,
              'dps':0
            }
          }
          for (let i = 0; i < battleData.value.form.length; i++){
            battleData.value.form[i]['mrdps'] = battleData.value['act']['mndps']['player'][battleData.value.form[i]['playerID']]
            battleData.value.form[i]['mndps'] = {
              'dps':undefined
            }
          }
        }
      }
    }
    else{
      router.push('/405')
    }
    loading.value = false
  }).catch((err)=>{
    console.log(err)
  })
}

const bossList = {
  '张景超':{
    img:['xjd',1]
  },
  '刘展':{
    img:['xjd',2]
  },
  '苏凤楼':{
    img:['xjd',3]
  },
  '韩敬青':{
    img:['xjd',4]
  },
  '藤原佑野':{
    img:['xjd',5]
  },
  '李重茂':{
    img:['xjd',6]
  },
  '时风':{
    img:['wyhl',1]
  },
  '乐临川':{
    img:['wyhl',2]
  },
  '牛波':{
    img:['wyhl',3]
  },
  '和正':{
    img:['wyhl',4]
  },
  '武云阙':{
    img:['wyhl',5]
  },
  '翁幼之':{
    img:['wyhl',6]
  },
}

const mapList = {
  '586': {
    'img':'xjd',
    'name':'10人西津渡'},
  '587': {
    'img':'xjd',
    'name':'25人普通西津渡'},
  '588': {
    'img':'xjd',
    'name':'25人英雄西津渡'},
  '636': {
    'img':'wyhl',
    'name':'10人武狱黑牢'},
  '637': {
    'img':'wyhl',
    'name':'25人普通武狱黑牢'},
  '638': {
    'img':'wyhl',
    'name':'25人英雄武狱黑牢'}
}

const getInstanceImg = () => {
  let name = mapList[battleData.value.mapDetail]['img']
  return new URL(`../assets/${name}.png`, import.meta.url).href
}

const getBossImg = () => {
  let map = bossList[battleData.value.boss]['img'][0]
  let number = bossList[battleData.value.boss]['img'][1]
  return new URL(`../assets/${map}/${number}.png`, import.meta.url).href
}

const occTable = {
  "0": {
    'color':'rgb(255, 255, 255)',
    'name':'0'
  },
  "1": {
    'color':'rgb(210, 180, 0)',
    'name':'sl'
  },
  "1t": {
    'color':'rgb(210, 180, 0)',
    'name':'xisuijing'
  },
  "1d": {
    'color':'rgb(210, 180, 0)',
    'name':'yijinjing'
  },
  "2": {
  'color':'rgb(127, 31, 223)',
  'name':'wh'
      },
  "2d": {
    'color':'rgb(127, 31, 223)',
    'name':'huajianyou'
  },
  "2h": {
    'color':'rgb(127, 31, 223)',
    'name':'lijingyidao'
  },
  "4": {
  'color':'rgb(56, 175, 255)',
  'name':'cyg'
  },
  "4m": {
    'color':'rgb(56, 175, 255)',
    'name':'zixiagong'
  },
  "4p": {
    'color':'rgb(56, 175, 255)',
    'name':'taixujianyi'
  },
  "5": {
  'color':'rgb(255, 127, 255)',
  'name':'qx'
  },
  "5h": {
    'color':'rgb(255, 127, 255)',
    'name':'yunchangxinjing'
  },
  "5d": {
    'color':'rgb(255, 127, 255)',
    'name':'bingxinjue'
  },
  "3": {
  'color':'rgb(160, 0, 0)',
  'name':'tc'
  },
  "3t": {
    'color':'rgb(160, 0, 0)',
    'name':'tielaolv'
  },
  "3d": {
    'color':'rgb(160, 0, 0)',
    'name':'aoxuezhanyi'
  },
  "8": {
  'color':'rgb(220, 220, 0)',
  'name':'wenshuijue'
  },
  "9": {
  'color':'rgb(205, 133, 63)',
  'name':'xiaochenjue'
  },
  "10": {
  'color':'rgb(253, 84, 0)',
  'name':'mj'
  },
  "10t": {
    'color':'rgb(253, 84, 0)',
    'name':'mingzunliuliti'
  },
  "10d": {
    'color':'rgb(253, 84, 0)',
    'name':'fenyingshengjue'
  },
  "6": {
  'color':'rgb(63, 31, 159)',
  'name':'wd'
  },
  "6h": {
    'color':'rgb(63, 31, 159)',
    'name':'butianjue'
  },
  "6d": {
    'color':'rgb(63, 31, 159)',
    'name':'dujing'
  },
  "7": {
  'color':'rgb(0, 133, 144)',
  'name':'tm'
  },
  "7m": {
    'color':'rgb(0, 133, 144)',
    'name':'tianluoguidao'
  },
  "7p": {
    'color':'rgb(0, 133, 144)',
    'name':'jingyujue'
  },
  "21": {
    'color':'rgb(180, 60, 0)',
    'name':'cy'
  },
  "21t": {
    'color':'rgb(180, 60, 0)',
    'name':'tieguyi'
  },
  "21d": {
    'color':'rgb(180, 60, 0)',
    'name':'fenshanjing'
  },
  "22": {
  'color':'rgb(100, 250, 180)',
  'name':'cg'
  },
  "22h": {
    'color':'rgb(100, 250, 180)',
    'name':'xiangzhi'
  },
  "22d": {
    'color':'rgb(100, 250, 180)',
    'name':'mowen'
  },
  "23": {
  'color':'rgb(71, 73, 166)',
  'name':'beiaojue'
  },
  "24": {
  'color':'rgb(195, 171, 227)',
  'name':'linghaijue'
    },
  "25": {
  'color':'rgb(161, 9, 34)',
  'name':'yinlongjue'
  },
  "211": {
  'color':'rgb(166, 83, 251)',
  'name':'taixuanjing'
  },
  "212": {
  'color':'rgb(0, 172, 153)',
  'name':'yz'
  },
  "212h": {
    'color':'rgb(0, 172, 153)',
    'name':'lingsu'
  },
  "212d": {
    'color':'rgb(0, 172, 153)',
    'name':'wufang'
  },
  "213": {
  'color':'rgb(107, 183, 242)',
  'name':'gufengjue'
}
}

const getOccImg = (occ) => {
  let name = occTable[occ]['name']
  return new URL(`../assets/occ_logo/${name}.png`, import.meta.url).href
}

const selectedRow = ref()

const selectRow = (row) => {
  selectedRow.value = row
}

const displayStat = ref('rdps')

const displayData = computed(()=>{
  if (selectedRow.value[displayStat.value]['namedSkill']){
    let raw = lodash.cloneDeep(toRaw(selectedRow.value[displayStat.value]))
    for (let i in raw.namedSkill){
      raw.namedSkill[i]['name'] = i
    }
    raw.namedSkill = Array.from(Object.values(raw.namedSkill))
    if (raw.namedSource){
      for (let i in raw.namedSource){
        raw.namedSource[i]['name'] = i
      }
      raw.namedSource = Array.from(Object.values(raw.namedSource))
    }
    if (raw.namedTarget){
      for (let i in raw.namedTarget){
        raw.namedTarget[i]['name'] = i
      }
      raw.namedTarget = Array.from(Object.values(raw.namedTarget))
    }
    return raw
  }else{
    return []
  }
})

const rdpsSort = (a,b) => {
  if (a.rdps.dps > b.rdps.dps){
    return 1
  }else if (a.rdps.dps < b.rdps.dps){
    return -1
  }else{
    return 0
  }
}
const ndpsSort = (a,b) => {
  if (a.ndps.dps > b.ndps.dps){
    return 1
  }else if (a.ndps.dps < b.ndps.dps){
    return -1
  }else{
    return 0
  }
}
const mrdpsSort = (a,b) => {
  if (a.mrdps.dps > b.mrdps.dps){
    return 1
  }else if (a.mrdps.dps < b.mrdps.dps){
    return -1
  }else{
    return 0
  }
}
const mndpsSort = (a,b) => {
  if (a.mndps.dps > b.mndps.dps){
    return 1
  }else if (a.mndps.dps < b.mndps.dps){
    return -1
  }else{
    return 0
  }
}
const rhpsSort = (a,b) => {
  if (a.rhps.hps > b.rhps.hps){
    return 1
  }else if (a.rhps.hps < b.rhps.hps){
    return -1
  }else{
    return 0
  }
}
const hpsSort = (a,b) => {
  if (a.hps.hps > b.hps.hps){
    return 1
  }else if (a.hps.hps < b.hps.hps){
    return -1
  }else{
    return 0
  }
}
const ohpsSort = (a,b) => {
  if (a.ohps.hps > b.ohps.hps){
    return 1
  }else if (a.ohps.hps < b.ohps.hps){
    return -1
  }else{
    return 0
  }
}
const ahpsSort = (a,b) => {
  if (a.ahps.hps > b.ahps.hps){
    return 1
  }else if (a.ahps.hps < b.ahps.hps){
    return -1
  }else{
    return 0
  }
}

</script>

<style scoped>
.el-table {
  --el-table-row-hover-bg-color: #2b455e5e;
  --el-table-current-row-bg-color: #2b455e94;
}
</style>